<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--favicon -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="apple-touch-icon" sizes="180x180" href="../../css/favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../../css/favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../../css/favicon/favicon-16x16.png">
   
        <link rel="mask-icon" href="../../css/favicon/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

        <title>Lecture 7.1</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
        </style>
       <link rel="stylesheet" href="./style.css"> 
	</head>
	<body>
        <button type="button" id="playBtn" class="hide">Play 8-ball</button>
         
        <div id="player1" class="player player1 unknown hide">
        <h5>Player 1 (<span></span>)</h5>
    
        <ul>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
        </ul>
        </div>
    
        <div id="player2" class="player player2 unknown hide">
        <h5>Player 2 (<span></span>)</h5>
    
        <ul>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
            <li>?</li>
        </ul>
        </div>
    
        <ul id="gamelog" class="gamelog list-unstyled hide">
    
        </ul>
    
        <div id="timer" class="timer hide">
            30
        </div>
        
        <div id="message" class="hide">
          <h1>Player won!</h1>
          <h2>Thank you for playing.</h2>
        </div>
    
        <script type="importmap">
            {
                "imports":{ 
                    "three":"../libs/three146/three.module.js"
                }
            }
        </script>
        <script type="module">
            import { Game } from './Game.js';

            document.addEventListener("DOMContentLoaded", function(){
                const game = new Game();
                window.game = game;
            });
        </script>
	</body>
</html>
